<template>
  <h1>个人简历练习</h1>
  <table border="1px">
    <tr>
      <td>照片:</td>
      <td><img :src="person.imgUrl" width="100"></td>
    </tr>
    <tr><td>姓名:</td><td>{{person.name}}</td></tr>
    <tr><td>年龄:</td><td>{{person.age}}</td></tr>
    <tr>
      <td>好友:</td>
      <td>
        <ul>
          <li v-for="fName in person.friends">{{fName}}</li>
        </ul>
      </td>
    </tr>
  </table>
  <button @click="load()">点我加载数据</button>
</template>

<script setup>
import {ref} from "vue";
//效果:表格右侧列无数据,点击"加载数据"按钮后,页面显示右侧列数据
const person = ref({name:'',age:'',imgUrl:'',friends:[]});

const load = ()=>{
  //给person对象的所有属性赋值
  //图片在public文件夹下,可通过文件名直接找到该图片
  person.value = {
    name:'范传奇',
    age:'20',
    imgUrl:'/imgs/fcq.jpg',
    friends:['路飞','索隆','娜美']
  };
}
</script>

<style scoped>

</style>